<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="images/icon.png" />
        <title>Atlas</title>


        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


        <link rel="stylesheet" href="dist/leaflet.css" />
        <link rel="stylesheet" href="css/leaflet.css" />
        <link rel="stylesheet" href="css/geo_searsh.css" />
        
        <script src="dist/leaflet.js"></script> 
        <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
        <script src="layer/Google.js"></script>
       
        <script src="js/geoMarker.js"></script>
        
        <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
        <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
        <script src="calendar_ru.js" type="text/javascript"></script>
        <script src="azimut_ico.js" type="text/javascript"></script>
        <script src="js/DtpEvent.js" type="text/javascript"></script>


		<script src="calcTime.js" type="text/javascript"></script> <!-- класс расчета времени и даты -->
	
	<script src="graphSpeed.js" type="text/javascript">  </script> <!-- класс рисования графика скорости -->
		<script type="text/javascript">
        $(document).ready(function(){
          var z= graphSpeed.option();//задаем опции
		
        });
		</script>
		
		
		
		
        <script src="ico_track.js" type="text/javascript"></script>

        <script src="send.js" type="text/javascript"></script>  <!-- отправка емайла -->
        <script src="vhide.js" type="text/javascript"></script> 
        <script src="registerdevise.js" type="text/javascript"></script> 
        <!--
        <script src="https://raw.github.com/gist/2197042/2b90c41b39b7d5b3a851d8f256de2ebd3fe1fb74/leaflet-google.js"></script>
        -->
        <script src="js/yandex.js" type="text/javascript"></script> 


        <script src="js/leaflet.polylineDecorator.js"></script>


        <script src="layer/Yandex.js"></script>

        <script src="clock.js"></script>  <!-- часы текущее время -->
		
		
		 <script type="text/javascript">
        $(document).ready(function(){
            $('#scrollbar1').tinyscrollbar();	
        });
		</script>
		
		
		
		
		
		
	<script type="text/javascript">
			$(document).ready(function(){
				$('#statistics').click(function(){ 
					vhide(this);
					$('#form_statistics').submit();
					
					
				 })
			});
	</script>	
		
	
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            .ui-autocomplete {
                background-color: white;
                width: 300px;
                border: 1px solid #cfcfcf;
                list-style-type: none;
                padding-left: 0px;
            }
        </style>
    </head>



    <body onload="activSite()">
        <!-- <div style="color: red;">
        <p>Проводятся технические работы. </p>
        <p>Временно на карте будут отмечены тестовые ДТП</p>
         </div> -->
        <div id="loader" class="loader" style="display:none;">
            <img id="img-loader" src="images/ajax-loader.gif" alt="Loading..."/>
        </div>
        <div style="width: 100%; height: 100%;">
            <div id="header" >

                <div  style="width: 170px;
                height: 20px;
                float: left;
                position:relative;
                z-index: 2;" >
                    <table   style="width: 100%; height: 20px;border-spacing:0;" valign="center" cellpadding="0" cellspacing="0">
                        <tr style="color: #000; margin: -2px">

                            <td id= "target" class="button" style="width:80px;" align="center"  valign="center" rowspan="2">
                                Target
                            </td>
                            <td class="info" height="11">
                                <p style="margin:-1px 0 -1px 2px; font-size: 9px;" id="clock" >no link</p>
                            </td>
                            <td  class="button" id="setting" onclick="vhide(this)" style="width:25px;vertical-align:center;horizontal-align:center;" rowspan="2">
                                <img src="images/setting.png" style="margin:1px;width:20px;height:20px" title="setting">
                            </td>

                        </tr>

                        <tr style="color: #000; margin: -2px" >
                            <td  class="info"  style="" ><p style="margin:-1px 0 -1px 2px; font-size: 9px;" id="clock2" >no link</p></td>
                        </tr>
                    </table>


                    <!-- <p  align="center" style="margin: 5px auto; ">Target <span id="clock" style="color: #000;"></span></p> -->
                </div>

                <div  style="width: 170px; height: 25px;
                      margin-left: -160px; margin-right:2px;
                      position:relative; float:right;
                      z-index: 2" >


                    <table  style="width: 100%; height: 20px"  align="center" valign="center" cellpadding="0" cellspacing="0">
                        <tr>

                            <td class="button" id="but_mh" onclick="vhide(this)" width="20px" style="height: 25px;"  align="center"  valign="center" >
                                <img style="width:20px;height:20px" src="images/oblasti.png"   >
                            </td>

                            <td  class="button" id="geosearch_v" onclick="vhide(this)" width="15px" style="height: 25px; " align="center"  valign="center" >
                                <img style="width:20px;height:20px"  src="images/lupa.png"  >
                            </td>
                            <!--id="setting"-->
                            <td id='information' class="button" onclick="vhide(this)" style="height: 25px; width:25px" align="center"  valign="center" >
                                Information
                            </td>


                        </tr>

                    </table>

                </div>



            </div>
            <div id="map" style="width: 100%; height: 100%; margin: auto; z-index: 1" >
            </div>
        </div>
        <div align="center" style=" position: absolute; top: 3px; left: 50%; width: 40px; height: 17px; margin-left: -12px; ">
            <img src="images/logo.png" style="margin-top: 5px; z-index: 1"  >
        </div>



        <div id="div_avto" style="top: 32px; width: 170px; position: absolute;  background-image: url(images/bg.png);
             z-index: 2;  
             border: 2px ridge #01a7ad;
             visibility: hidden;
             text-shadow: none">



            <div id="scrollbar1" style="z-index: 2; margin: 5px auto;">
                <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                <div class="viewport">
                    <div class="overview">
					
                        <table id="table_us" align="center" style="margin-left: 2px; margin-top: 5px" cellspacing="2">

                            <!--  смотри скрипт "вывод зарегестрированных устройств"-->
                        </table>



                    </div>
                </div>
            </div>


            <div class="pointer"  style="width: 170px;    position:absolute; bottom: 0px;"  >

                <table style="width: 170px; font-size: 10px;" align = " center" cellpadding="0" cellspacing="0"> 
                    <tr align = " center">
                        <td class="button" align = "center" id= "sledit" style="width: 50%;   height: 25px;"> Auto center</td>
                        <td class="button" align = "center" id="vector" style="width: 50%;   height: 25px; ">Track line</td>
                    </tr>
                    <tr>
                        <td class="button" id= "k_report" colspan="2" align="center"  style="width: 100%; font-size: 12px;   height: 25px; "> Report</td>
                    </tr>

                </table>




            </div>

        </div>



        <div id="div_information" style="top: 32px; width: 170px;  position: absolute;  right: 0px; background-image: url(images/bg.png);
             z-index: 2;  
             border: 2px ridge #01a7ad;
             visibility: hidden;
             text-shadow: none">
				
				<div id="scrollbar2" style="z-index: 2; margin: 5px auto;">
                <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                <div class="viewport">
                    <div class="overview">
				 
							<table style="width: 160px; " align = " center" cellpadding="0" cellspacing="0">
								<tr>
									<td id ="infoText" class="pointer" colspan="2" align="left"  valign ="top" style="width: 100%;  "></td>
								</tr>
							</table>
							
			
			       </div>
                </div>
            </div>
		<script type="text/javascript">
      
		</script>

			

            <div id="action_event"   style="width: 170px;     position:absolute; bottom:0px;"  >
                <table style="width: 170px;margin:0px;" align = " center" cellpadding="0" cellspacing="0">

                    <tr>
                        <td class="button" id="confirm_event"  align="center"   style="width: 50%;  height: 25px;">Confirm<span id="span_event"></span></td>
                        <td class="button" id="send_email" onclick = "vhide(this)" align="center"   style="width: 100%;  height: 25px;">send em@il<span id="span_event"></span></td>
                    </tr>
<!--
                    <tr align = " center" >
                        <td class="pointer" id = "accident" onclick = "clickType(this)" align = "center" style="width: 50%;   height: 25px; border-top: 2px ridge #01a7ad;  "> <img src="images/dtp.png" style="margin-bottom:-2px" ><p id="accidentText">Accident</p></td>
                        <td class="pointer" id = "malfunction"  onclick = "clickType(this)" align = "center"  style="width: 50%;  height: 25px; border-top: 2px ridge #01a7ad; "> <img src="images/ins.png" style="margin-bottom:-2px" ><p id="malfunctionText">Malfunction</p></td>
                    </tr>

-->
                    <tr>
                        <td class="button" id="addEvent"  align="center" colspan="2"   style="width: 100%;  height: 25px; "  onClick="vhide(this)">Add event</td>
                    </tr>

                    <tr>
                        <td class="button" id="removeDtp"  align="center"     style="width: 50%;  height: 25px;">Remove</td>
                        <td class="button" id="resetParam"  align="center"    style="  height: 25px;">Reset</td>
                    </tr>
                </table>
            </div>

        </div>


        <div id="div_report" style="
             top: 50px;
             left: 50%;
             width: 180px; 
             position: absolute; 
             background-image: url(images/bg.png);
             z-index: 2;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -90px;
             visibility: hidden;
             text-shadow: none;"> 
            <p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; ">Device/user: <span id="report_user">undefined</span></p>
            <p align="center">From date</p>

            <form action="" style="z-index: 3" >

                <p style="margin-top:0px; z-index: 3" align="center"  ><input id="forma_from" style="z-index: 3" type="text" value="dd-mm-yy" name="mydata" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)" >	</p>

            </form>
            <p align="center">To date</p>

            <form action="" style="z-index: 3" >

                <p style="margin-top:0px; z-index: 3"  align="center" ><input id="forma_to" style="z-index: 3" type="text" value="dd-mm-yy" name="mydata" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)" >	</p>

            </form>

            <div class="pointer"  >
                <table align = "center" cellpadding="0" cellspacing="0" style="margin-top: 10px" >
                    <tr> 
                        <td id="show_track"   class="button" align = "center"  style="width: 178px;   height: 25px;">Show track</td>
						<td id="show_graph_speed"   class="button" onclick="vhide(this);" align = "center"  style="width: 178px;   height: 25px;">Graph speed</td>
                    </tr>
                    <tr> 
                        <td id="skryt" class="button" align = "center"  style="width: 159px;   height: 25px; " colspan="2">Hide track</td>
                    </tr>

                    <tr> 
                        <td  align = "center"  style="width: 159px;   height: 25px; border-bottom: solid 1px #01a7ad; " colspan="2">Points: <span id="points"> ...</span> </td>
                    </tr>

                    <tr> 
                        <td  align = "center"  style="width: 159px;   height: 25px; border-bottom: solid 1px #01a7ad; " colspan="2">Distance km: <span id="dist_t"> ...</span> </td>
                    </tr>
                    <tr> 
                        <td  align = "center"  style="width: 159px;   height: 25px;   " colspan="2" >Vmax km/h: <span id="vmax" colspan="2"> ...</span>  </td>
                    </tr>

                    <tr> 
                        <td  align = "center"  style="width: 159px;   height: 25px;   " colspan="2">  <img src="images/lineyka.png"   ></td>
                    </tr>

                    <tr> 
                        <td  align = "center"  id="cancel_report"   class="button" style="width: 159px;   height: 25px;" colspan="2">Close</td>
                    </tr>


                </table>

            </div>




        </div>

		 <div id="div_graph_speed" style="
             bottom: 2px;
             left: 50%;
             width: 300px; 
			 height: 200px;
             position: absolute; 
            
             z-index: 2;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -150px;
             visibility: hidden;
             text-shadow: none;"> 
			 
			<div id="scrollbar3" style="z-index: 2; margin: 0px auto;">
                <div class="scrollbar"><div class="track"><div class="thumb" style="width: 10px"><div class="end"></div></div></div></div>
                <div class="viewport">
                    <div class="overview" >
						<style type="text/css" id="ss">
						<!-- 	#scrollbar3 .overview { list-style: none; width: 1000px; padding: 0; margin: 0; position: absolute; left: 0px; top: 0;  } -->
						</style>
			 
			 
					 <canvas id="canvas_speed"  width="" height="200px">	 Ваш браузер не поддерживает Canvas.
					 </canvas> 
						 
				 </div>
                </div>
            </div>
			 
			 <div style=" width: 20px; 
			 height: 20px; 
			
			 position:relative;
			 top:-185px;
			  float:left;
			 z-index:5"  onclick="graphSpeed.zumMinus()" class="button2">
			<p align='center' style="font-size: 16px;" >-</p>
			 </div>
			 
			 <div style=" width: 20px; 
			 height: 20px; 
			 
			 position:relative;
			 top:-185px;
			 float:right;
			 z-index:5"  onclick="graphSpeed.zumPlus()" class="button2">
			<p align='center' style="font-size: 16px;" >+</p>
			 </div>
			 
			  <div id='close_graph' style=" width: 100px; 
			 height: 20px; 
			 
			 position:absolute;
			 bottom: 0px;
			left:50%;
			margin-left: -50px;
			 z-index:5"  onclick="vhide(this);" class="button2">
			<p align='center' style="font-size: 16px;" >Close</p>
			 </div>
			 
			 
			 
		</div>
			 
		
		
		

        <div id="div_setting" style="
             top: 40px;
             left: 50%;
             width: 300px; 
             position: absolute; 
             background-image: url(images/bg.png);
             z-index: 2;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -150px;
             visibility: hidden;
             text-shadow: none;"> 
            <p align="center">Setting</p>


            <table style="margin:5px">
                <tr>
                    <td>GMT</td><td><input id="gmt" type="text" size="2" > </td> <td class="button" height="20px" onclick="set.gmtchange()"><p style="margin:3px">change</p></td>
                </tr>
            </table>

            <table id="register_divise" style="font-size: 10px; width: 100%">

            </table>

            <table class="font" style=" margin: 5px">
                <tr> 
                    <td id= "add_divise" align="center" class="button" onclick="set.regist()" style="width: 158px; margin: 5px auto; height: 25px; ">
                        Add devise
                    </td>

                    <td id="rem_devise" align="center" class="button" onclick="set.rem()" style="width: 158px; margin: 1px auto; height: 25px">
                        remove devise (N)<span id="i_rem_dev"></span>
                    </td>
                </tr>
            </table>


        </div>			


        <div id="div_msg_dtp" style="
             top: 10px;
             left: 50%;
             width: 210px;
             position: absolute; 
             background-image: url(images/bg.png);
             z-index: 4;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -105px;
             visibility: hidden;
             text-shadow: none;"> 




             <table style="width: 100%"  align="center" cellpadding="0" cellspacing="0">
                 <tr align = "center">
                     <td colspan="3" class='title' style="">Comment</td>
                 </tr>

                <tr align = "center" >
                    <td colspan="3" style=""><textarea id="commentText" rows="6" style="border: none; border-top: 1px ridge #01A7AD;resize: none; width: 100%; margin: -1px;  margin-bottom: -5px; background: url(images/bg.png);"></textarea></td>
                </tr>
                <tr align = "center" id="tr_type_event" class="tr_type_event" style="margin: -1px; border: none; border-top: 1px ridge #01A7AD ;width: 100%" >
                    <td class="pointer hover-light"  onclick = "dtpEvent.type(this)" align = "center" style="   height: 25px; border-top: 2px ridge #01a7ad; width:65px   "> <img src="images/dtp.png" style="margin-bottom:-2px" ><p id="accidentText">Accident</p></td>
                    <td class="pointer hover-light"  onclick = "dtpEvent.type(this)" align = "center"  style=";  height: 25px; border-top: 2px ridge #01a7ad; width:65px  "> <img src="images/ins.png" style="margin-bottom:-2px" ><p id="malfunctionText">Malfunction</p></td>
                    <td class="pointer hover-light"  onclick = "dtpEvent.type(this)" align = "center"  style=" height: 25px; border-top: 2px ridge #01a7ad; width:65px "> <img src="images/other.png" style="margin-bottom:-2px" ><p id="other">Other</p></td>
                </tr >

             </table>

             <table style="width: 100%; border-top: 1px ridge #01A7AD; font-size: 12px "  align="center" cellpadding="0" cellspacing="0" >
                 <tr>
                     <td  class="title padding3" colspan="2" style="height: 25px; width: 100%">
                         <input type="checkbox" id="checkbox-idwe" /> <label for="checkbox-id">Reported immediately oll </label>
                     </td>

                 </tr>
                 <tr>
                     <td  class="title padding3"  style="height: 25px;">
                         <input type="checkbox" id="checkbox-id" /> <label for="checkbox-id">Personal msg</label>
                     </td>
                     <td  class="title padding3"  style="height: 25px;">
                         <input type="checkbox" id="checkbox-idwew" /> <label for="checkbox-id">Em@il only</label>
                     </td>

                 </tr>
                 <tr>
                     <td  class="title padding3"  style="height: 25px;">
                         <input type="checkbox" id="checkbox-id2" /> <label for="checkbox-id"> Personal em@il</label>
                     </td>
                     <td  class="title padding3"  style="height: 25px;">
                         <input type="checkbox" id="checkbox-idce2" /> <label for="checkbox-id"> moto.kiev </label>
                     </td>
                 </tr>
             </table>

            <table style="width: 100%; border-top: 1px ridge #01A7AD "  align="center" cellpadding="0" cellspacing="0" >
                <tr>
                    <td align="center"  class="button" style="height: 25px; width: 180px" >Alarm</td>
                    <td align="center"  class="button cancel" style="width: 15px" onclick="vhide(this)" id="canceReportDtp"></td>
                </tr>
            </table>
        </div>


        <div id="div_confirm_cancel_dtp" style="
             bottom: 25px;
             right: 25px;
             width: 180px; 
             position: absolute; 
             background-image: url(images/bg.png);
             z-index: 2;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -90px;
             visibility: hidden;
             text-shadow: none;"> 


            <table align="center" cellpadding="0" cellspacing="0" style="width: 180px;">

                <tr>

                    <td align="center" colspan="2" valign="center" style="   background-image: url(images/fon_nadpis.png);"><img src="images/rem_dtp.png"  ><span id="selectRemove"></span>
                    </td>
                </tr>


                <tr>

                    <td align="center" id ="confirm_remove" class="button" style="   height: 25px;" >Confirm</td>
                    <td align="center" id="cancel_remove"  class="button" style="   height: 25px;">Cancel</td>
                </tr>
            </table>
        </div>




        <div id="div_geosearch" style="
             top: 42px;
             left: 50%;
             width: 300px; 
             position: absolute; 
             background-image: url(images/fon_nadpis.png);
             z-index: 1;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -150px;
             opacity: 0.8;
             color: #0084c2;
             visibility: hidden;"> 		 

            <label style="horizontal-align: center">GEO Search</label>
            <input id="address" style="width:296px;" type="text"/> 



        </div>

        <!-- окошко рассылки емайлов -->
        <div id="div_send" style="
             bottom: 100px;
             right: 160px;
             width: 180px; 
             position: absolute; 
             background-image: url(images/bg.png);
             z-index: 4;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             visibility: hidden;

             text-shadow: none;"> 

            <p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; "> Comment</p>
            <table align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2"  align="center" style=" height: 25px; margin:-2px; " >
                        <form>
                            <textarea id="commentTextEmail" class="font" rows="4" style="width: 177px; margin-left:-1px;  margin-bottom: -3px; background: url(images/bg.png);"></textarea>
                        </form>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="checkbox" id="alpha_sms" checked="checked"><span>alpha_sms</span><br/>
                        <input type="checkbox" id="kyivstar_sms" checked="checked"><span>kyivstar_sms</span><br/>
                        <input type="checkbox" id="email" checked="checked"><span>e-mail</span><br/>
                        <input type="checkbox" id="motokiev" checked="checked"><span>moto.kiev.ua</span>
                    </td>
                </tr>
                <tr>
                    <td align="center" id ="confirm_send" class="button" onclick="vhide(this);" style="width: 178px;   height: 25px;" >Alert</td>
                    <td align="center" id="cancel_send"  class="button" onclick="vhide(this)" style="width: 178px;   height: 25px;">Cancel</td>
                </tr>	
            </table>
        </div>

        <div id="div_oblasti" style="
             top: 35px;
             right: 170px;
             width: 150px; 
             position: absolute; 
             background-image: url(images/bg.png);
             z-index: 1;  
             border: 2px ridge #01a7ad;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: 0px;
             opacity: 0.8;
             color: #0084c2;
             visibility: hidden;"> 	
            <!-- скрипт показа областей -->
        </div>

        <div id="mh" style="
             top: 35px;
             right: 170px;
             width: 150px; 
             position: absolute; 
             z-index: 1;  
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: 0px;
             visibility: hidden;
             "> 	

            <div class="button" id="oblasti">
                <p  align="center" style="margin: 3px; "  >Wiki Области</p>
            </div>
			
			<form id="form_statistics" method="post"  target="blank" action="statistics.php" style="display: none;">
				<input name="login" type="text"  maxlength="15" style="whidth: 160px" value="<?php echo  $login.'!'.$pass_l; ?>" >  <!-- форма для перехода на страниицу статистики -->
			</form>
			
            <div class="button" id="statistics">
                <p  align="center" style="margin: 3px; "  >Статистика ДТП</p>
            </div>
        </div>
    </body>

   


    <script type="text/javascript"> // расчет пааматров экрана
        var width=document.body.clientWidth; // ширина  
        var height=document.body.clientHeight; // высота  
        var height_div_avto;
        var h;
        //alert(width);

        var w=(width-6)*100/width;

        h=100*35/height;
        //h=h+"px";
        h=100-h;
        h=h+"%";
        //alert(h);
        var h_txt;
        h_txt=100-(100*120)/height;
        h_txt= h_txt+"%";

        height_div_avto =((height-40)/height)*100;
        height_div_avto=height_div_avto+"%";
        //alert(height_div_avto);
       // document.getElementById("header").style.width =  w+"%";
        document.getElementById("map").style.height =  h;
        document.getElementById("div_avto").style.height =  height_div_avto;
        document.getElementById("div_information").style.height =  height_div_avto;
        ///document.getElementById("scrollbar1").style ="50px"
	
    </script>


    <script type="text/javascript"> //вывод зарегистрированных устройств
        var countUzers = <?php echo  $countUzers; ?>; //получаем количество зарегестрированных юзеров. 
        var arrUzers = <?php echo  $arrUzers; ?>; //получаем массив самих юзеров 
        var uzer = [];
        var uzerClick=(-1); // при клике на юзера этой переменной присваивается номер юзера (начиная с нуля)
        var indexSledt=0;

        var tempPoint=[];


        for ( var i=0; i<countUzers; i++){             // разбиваем юзеров на двумерный массив. uzer [порядковый номер юзера 0..1.. и тд][0-имей юзера, 1 имя юзера] 
            uzer[i] = arrUzers[i].split("#");
        }


        var us1 = '<tr><td width="70px" class="pointer" id = "usva" style="font-weight: bold; font-size: 12px">Name</td>	<td  style="font-weight: bold; font-size: 11px">GPRS</td>	<td  style="font-weight: bold; font-size: 10px">Speed</td></tr>';

        var us2="";

        //  строчки с юзерами. id первый получает uzer0, второй uzer1.. итд
        for ( var i=0; i<countUzers; i++){         
            us2+='<tr> <td class="pointer" id="uzer'+i+ '" style=" font-size: 11px; ">'+ uzer [i][1]+'<p style=" font-size: 9px; ">'+uzer [i][2]+'</p>'+
                ' </td> 	<td id="uzerGPRS'+i+'" style="font-weight: bold; font-size: 10px">...</td> <td id="uzerSpeed'+i+'" style="font-weight: bold; font-size: 10px">...</td>	</tr>';
        }
        document.getElementById('table_us').innerHTML = us1+us2; 



    </script>








    <script>//инициализация карты

        var map = new L.Map('map', {center: new L.LatLng(50.442, 30.558), zoom: 11, zoomAnimation: false, closePopupOnClick: false, fadeAnimation: false } );
        var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        var yndx = new L.Yandex();
        //var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
       // var ggl = new L.Google();
        var ggl =new L.TileLayer('http://mt0.googleapis.com/vt/lyrs=m@207000000&hl=ru&src=api&x={x}&y={y}&z={z}&s=Galile',{maxZoom: 18,minZoom:3});
        var gglsats = new L.TileLayer('http://khm0.googleapis.com/kh?v=125&hl=ru-RU&x={x}&y={y}&z={z}&token=104236',{maxZoom: 18,minZoom:3});
        var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
        map.addLayer(ggl);
        map.addControl(new L.Control.Layers( {'OSM':osm, 'Google':ggl, 'Google sat':gglsats , "Yandex":yndx   }, {"Пробки":ytraffic} ));
		
        var myIcon; //иконка текущего положения
        myIcon = L.icon({ 
            iconUrl: 'images/strelka/0001.png',
            //iconRetinaUrl: 'mimages/strelka/00001.png',
            iconSize: [20, 20],
            iconAnchor: [10, 10],
				
        });
			
        var icon_move=[];
		
        for(var i=0;i<25; i++){
            icon_move[i]=L.icon({ 
                iconUrl: 'images/strelka/000'+i+'.png',
                //iconRetinaUrl: 'mimages/strelka/00001.png',
                iconSize: [20, 20],
                iconAnchor: [10, 10],
				
            });
		
        }
		
        var icon_no_signal=L.icon({ 
            iconUrl: 'images/mrk_no_signal.png', // маркер отсутсвия сигнала
            //iconRetinaUrl: 'mimages/mrk_no_signal.png',
            iconSize: [14, 14],
            iconAnchor: [7, 7],
				
        });
			
        var icon_no_speed=L.icon({ 
            iconUrl: 'images/mrk_no_speed.png', // маркер отсутсвия сигнала
            //iconRetinaUrl: 'mimages/mrk_no_signal.png',
            iconSize: [14, 14],
            iconAnchor: [7, 7]
				
        });
			
		
        var point = new L.Point(0, -3); //офсет для попап
		
        var myIcon_tr; //иконка текущего положения
        myIcon_tr = L.icon({ 
            iconUrl: 'images/speed/1.png',
            //iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [8, 8],
            iconAnchor: [4, 4]
				
        });
		
        var icon_speed=[];
		
        for (var i=1; i<=7; i++){
            icon_speed[i] = L.icon({ 
                iconUrl: 'images/speed/'+i+'.png',
                //iconRetinaUrl: 'my-icon@2x.png',
                iconSize: [8, 8],
                iconAnchor: [4, 4]
				
            });
			
        }
			
        icon_speed[0] = L.icon({ 
            iconUrl: 'images/speed/0.png',
            //iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [10, 10],
            iconAnchor: [5, 5]
				
        });

        L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047]
        ]).addTo(map).bindPopup("I am a polygon.");


        L.circle([50.252, 28.66], 2000, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("Список будет тут (а може еще гдето)");



        var popup = L.popup();

        function onMapClick(e){
            //alert (e.latlng);
            //map.panTo(L.latLng(50.439, 30.397)); //центрирование карты
            marker=L.marker(e.latlng, {icon: myIcon}).bindPopup("I am a marker.").addTo(map);
        }

    </script>

    <script src="js/Marker.Rotate.js" type="text/javascript"></script>  <!-- плагин вращения маркера -->
    <script> // пересчет времени отображения от гринвича
        //var gmt=2; // счещение времени от гринвича

        var activClock=0;


        if(activClock==1){
            //document.getElementById("header").style.width =  width+"px";
            //clock();
            clock.show();
            //pusk();
            clock.start_site();
            zaprosDtp();
        }

        function activSite(){
            activClock=1;
            //clock();
            clock.show();
            //pusk();
            clock.start_site();
            zaprosDtp();
			
			$('#scrollbar2').tinyscrollbar(); // инициализация скролбара для меню информация
			
			
        }





        var gmt=<?php echo  $gmt; ?>;

        document.getElementById("gmt").value=gmt; 

       



        

    </script>


    <script type="text/javascript">//первая загрузка
        var login="<?php echo  $login; ?>";
		 var pass="<?php echo  $pass_l; ?>";
		// alert (pass);
        var lastPos = <?php echo  $lastPos; ?>;  //получаем массив с последними посылками
        var i;
        //alert (lastPos[1]); //проверяем
        var arrLastPos=[];
        arrLastPos[0]=lastPos[0].split(",");

        var change_signal=[];

        for( var i=0; i< countUzers; i++){
            change_signal[i]=0;
            arrLastPos[i]=lastPos[i].split(",");  //   arrLastPos[номер юзера начиная с 0][ 1 .. 2 координата , 3 время]      
        }


        var signal=[];
        function proverka_aktiv(){

            //alert(arrLastPos[0][3]);
            for(var i=0; i<countUzers; i++){
                 
                //alert(posTime);
              //alert(arrLastPos[i][3]);
				
				var presentSS=calcTime.ssYear(calcTime.present_time());//секунд с начала года текущие
				var parcelSS=calcTime.ssYear(calcTime.plusGmt(arrLastPos[i][3]));  //секунд с начала года в посылке
				var difference=presentSS-parcelSS;
				
				//alert(calcTime.present_time()+"  "+presentSS+" "+calcTime.plusGmt(arrLastPos[i][3])+" "+parcelSS);
                //alert(posTime +":"+tekTime);
                try{
                    if (600<difference){
                        //alert(raznica); 				// надо закрасить серым
			
                        document.getElementById("uzerGPRS"+i).style.color="#959595"; 
                        document.getElementById("uzerSpeed"+i).style.color="#959595"; 
                        //	change_signal[i]
                        signal[i]=0;
                        //change_signal[i]=1;
                        //redrawPoint(i);    // +перериросать маркер
			
                    }else{
                        document.getElementById("uzerGPRS"+i).style.color="#0030ba"; 	
                        document.getElementById("uzerSpeed"+i).style.color="#0030ba"; 				
                        signal[i]=1;			// есть сигнал юзер активный
                    }
                }catch(err){};
            }
	
        }

        proverka_aktiv(); //и запускае мфункцию проверки активности (есть ли сигнал)

        var marker =[]; 
        var popap=[];
        var last_marker_array_position =[]; //массив с последними координатами
        var popup;

        last_position_uzers();

        function last_position_uzers(){   //функция отображения последних позиций маркеров

            for( var i=0; i< countUzers; i++){                        //отображаем последние координаты юзеров
                var lat=(parseFloat(arrLastPos[i][1]));
                var lng=(parseFloat(arrLastPos[i][2]));
               
				var date=calcTime.unparsePresent(arrLastPos[i][3]);
			//alert(arrLastPos[i][3]);
			//	alert(date);
                var speed="Speed: "+arrLastPos[i][4]+"km/h";
		
                var azimut= azimut_ico(arrLastPos[i][7]);
                var icon_m=icon_move[azimut];
	
                if(arrLastPos[i][4]==0){
                    icon_m=icon_no_speed;
                    //alert("no speed");
                }
	
                if(signal[i]==0){
                    icon_m=icon_no_signal;
                }
	
                var satellite="Satellite: "+ arrLastPos[i][5];
                var charge= "Charge v: "+arrLastPos[i][6]+"";
	
	
                last_marker_array_position[i]=new L.LatLng(lat, lng); //при первом старте
	
                marker[i]=L.marker([lat, lng], {icon: icon_m}).bindPopup(uzer [i][1]+"<br>"+date+"<br>"+speed+"<br>"+satellite+ "<br>"+charge);
                marker[i].addTo(map);
	
	
	
                popup[i] = L.popup({autoPan: false, offset: point}).setLatLng(L.latLng(lat, lng)).setContent(uzer [i][1]+'<p style="margin: 0px; font-size: 9px;">'+uzer [i][2]+'</p>').addTo(map);
                document.getElementById('uzerGPRS'+i).innerHTML = date; 
                document.getElementById('uzerSpeed'+i).innerHTML = arrLastPos[i][4]+"km/h"; 
            }
	
        }
	

        //финиш первая загрузка
    </script>

    <script> // обновление координат
        var dlit=5000;  //каждые 5 секунд
        var intervalID;
        //intervalID = setTimeout(pusk, dlit); //пауза в 5 сек

        //setTimeout(pusk, dlit); 

        var kz= null;
        function pusk(){
            try {
                $.ajax({

                    type:'POST',
                    url:'z.php',
                    data:'countUzers=' + countUzers + '&login=' + login,
                    // async: false,
                    success:function (data) {
                        kz = data;
                        proverka_popoln();
                        setTimeout(pusk, dlit);
                        // alert (data);
                    }

                }).responseText; 			//получаем переменную kz содержащюю строку с последними данными. Каждый юзер разделен "!"
            } catch (err) {
            }
            ;
        }

        var ok=[];
        var arrOk=[];
        //var pi;
        var iv;
        function proverka_popoln(){
            //alert (kz);
            clock.show_request();

            ok= kz.split("!");  //разделем посылку на юзеров  ok[0] - данные нулевого юзера. данные - одной строкой
            //alert (ok[1]);
            //alert ("5cek");

            for(var i=0; i< countUzers; i++){
                arrOk[i]=ok[i].split(","); //разделяем 
                arrLastPos[i]=arrOk[i];
            }
            proverka_aktiv();
            for(var i=0; i< countUzers; i++){  // для каждого юзера сравниваем последнюю послыку с полученной из аякса (самой последней) :)
			
	
		
		
                //alert (change_signal[i]+"  "+signal[i]);
                if(ok[i]==lastPos[i] && signal[i]==0){
                    //alert ("нет новых посылок"); // нет
                }
                if(ok[i]==lastPos[i] && signal[i]==1){
                    //нет change_signal[i] 
                }
                if(ok[i]!=lastPos[i] || change_signal[i]!=signal[i]){ //перерисовываем
                    change_signal[i]=signal[i];
                   
                    redrawPoint(i);  // отрисовываем перерисовываем точку которая изменилась
                    lastPos[i]=ok[i]; // внимание ... проверить!	
			
		
		
                }
		
		
            }

        }




    </script>

    <script> //отрисовка новой точки (если появилась более новая точка после проверки данных в БД)
        function redrawPoint(i){
            //var i=pi;
            //change_signal[i]=0;
            map.removeLayer(marker[i]); //  очищаем преведущий один маркер !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            map.removeLayer(popup[i]); // очищаем попап
            arrLastPos[i]=ok[i].split(",");
            var lat=(parseFloat(arrLastPos[i][1]));
            var lng=(parseFloat(arrLastPos[i][2]));
          
            
	
           // var vremyaIzm = dataTime(yy, mm, dd, hh, mi, ss); // запускаем функцию им\изменения времени. Прибавляем GMT
			
			var date=calcTime.unparsePresent(arrLastPos[i][3]);//вычисляем дату
			
            var speed="Speed: "+arrLastPos[i][4]+"km/h";
            var satellite="Satellite: "+ arrLastPos[i][5];
            var charge= "Charge v: "+arrLastPos[i][6]+"";

            last_marker_array_position[i]=new L.LatLng(lat, lng); // меняем последнюю координату точким 
	
            var azimut= azimut_ico(arrLastPos[i][7]);
            icon_m=icon_move[azimut];
	
            if(arrLastPos[i][4]==0){
                icon_m=icon_no_speed;
                //alert("no speed");
            }
	
            if(signal[i]==0){
                icon_m=icon_no_signal;
            }
	
            marker[i]=L.marker([lat, lng], {icon: icon_m}).bindPopup(uzer [i][1]+"<br>"+date+"<br>"+speed+"<br>"+satellite+ "<br>"+charge);
            marker[i].addTo(map);
	
            popup[i] = L.popup({autoPan: false, offset: point}).setLatLng(L.latLng(lat, lng)).setContent(uzer [i][1]+'<p style="margin: 0px; font-size: 9px;">'+uzer [i][2]+'</p>').addTo(map);
	
            document.getElementById('uzerGPRS'+i).innerHTML = date; 
            document.getElementById('uzerSpeed'+i).innerHTML = arrLastPos[i][4]+"km/h";
	
            if(uzerClick!=(-1) && indexSledt==1 && uzerClick==i ){                 // если нажата кнопочка "следить" - центрируем карту на том устройстве за которым следим
                map.panTo(L.latLng(lat, lng)); 
            }
	
	
            if(indexVector==1){  //если нажат вектор - работаем с полилинией
                v[i]++;
                mPolylineCoords[i][v[i]]=last_marker_array_position[i]; //заполняем polylineCoords [ номер юзера][увеличиваем длинну вектора]
                iv=i;
                //alert(mPolylineCoords[i][v[i]]);
                polylineDraw(i); //запускаем функцию отрисовки	
            }
	
	
	
        }
    </script>

    <script type="text/javascript">// события по клику для каждого юзера
            <?php echo  $funClick; ?>; //получаем функции клик0 клик 1.. и тд
        //click;
            <?php echo  $obrabotka; ?>;


        //функция запускается при нажатии на одном из устройств. Функция принимает uzerClick - номер юзера на который произведено нажатие (см PHP).
        function activUzer(){
            for( i=0; i< countUzers; i++){
                document.getElementById("uzer"+i).style.color="#000";  //всем юзерам назнаяаем серый цвет
            }
            document.getElementById("uzer"+uzerClick).style.color="red"; //теперь только активному
            //alert (uzer [uzerClick][1]);
            document.getElementById("report_user").innerHTML = uzer [uzerClick][1]; 

        }

        document.getElementById("usva").onclick=usva;
        function usva(){
            //map.setCenter(myLatlng);
            map.setZoom(11);
            uzerClick=(-1);
            document.getElementById("sledit").style.color="#000";
            indexSledt=0;
            document.getElementById("report_user").innerHTML = "undefined"; 
            for( i=0; i< countUzers; i++){
                document.getElementById("uzer"+i).style.color="#000";  //всем юзерам назнаяаем черный цвет
            }

        }

    </script>



    <script>// кнопка отоборазить
        document.getElementById("show_track").onclick=otobr_trek;


        function otobr_trek(){

            var track;
            var fromPeriod = document.getElementById("forma_from").value;
            var toPeriod = document.getElementById("forma_to").value;
            var arrPeriod=[];
            //alert (fromPeriod+toPeriod);

            if(fromPeriod=="dd-mm-yy" || toPeriod=="dd-mm-yy"  || uzerClick==(-1) ){
                alert("Device or data undefined");
            }else{
                skryt();
				graphSpeed.option();//сбрасываем опции класса рисования графика скорости
                arrPeriod=[];
                arrPeriod=fromPeriod.split("-");
               // fromPeriod=arrPeriod[2].substring(2)+arrPeriod[1]+arrPeriod[0];
				
				fromPeriod=calcTime.parseCalendarFrom(fromPeriod);
				toPeriod=calcTime.parseCalendarTo(toPeriod);				
				//alert(fromPeriod);
				//alert(toPeriod);
				//инициализация класса
				
				graphSpeed.setFromTo(fromPeriod, toPeriod);
              
	
	
                track = $.ajax({  
					
                    type:'POST',
                    url:'track.php',
                    data: 'fromPeriod='+fromPeriod+'&toPeriod=' +toPeriod+ '&uzerClick='+uzerClick+'&login='+login, //посылаем интересующий нас день и номер юзера
                    async: false,
                    success: function (data){ 
                        //alert(data); 
                        //proverka_popoln();
					
                    },

                }).responseText;
                if (track=="0"){
                    alert ("нет данных");
                }else {
                    maxSpeed(fromPeriod, toPeriod, uzerClick, login);
					pointTrack(track, uzerClick);
                    
                }
	
	
            }
        }

        function maxSpeed(fromPeriod, toPeriod, uzerClick, login){
	
            //alert(fromPeriod);
            speed = $.ajax({  
					
                type:'POST',
                url:'maxspeed.php',
                data: 'fromPeriod='+fromPeriod+'&toPeriod=' +toPeriod+ '&uzerClick='+uzerClick+'&login='+login, //посылаем интересующий нас день и номер юзера
                async: false,
                success: function (data){ 
                    //alert(data); 
                    //proverka_popoln();
					
                },

            }).responseText;
            //////////////////
            document.getElementById("vmax").innerHTML = speed; 
			graphSpeed.maxSpeed(speed);
        }

        var arrTrack=[];
        var arrTrackFull=[];
        var marker_tr_array_position=[];
        var marker_tr=[];
        var polyline;
        var markerPatterns;
        function pointTrack(tr, nomerUzera){
            //alert(tr+nomerUzera);
            //var polylineCoords_tr=[];
	
            arrTrack=tr.split("!");
			graphSpeed.draw(arrTrack);
			
	
            marker_tr=[];
            marker_tr_array_position=[];
            //alert("количество точек:"+arrTrack.length); // количество точек.
	
            document.getElementById('points').innerHTML = arrTrack.length ;
            for(var i=0; i<arrTrack.length-1; i++){
                arrTrackFull[i]=arrTrack[i].split(",");
				
				
			
				
				
                var lat=(parseFloat(arrTrackFull[i][1]));
                var lng=(parseFloat(arrTrackFull[i][2]));
				
				var date = calcTime.unparsePresent(arrTrackFull[i][3]);//вычисляем дату учитывая GMT
                var speed="Speed: "+arrTrackFull[i][4]+"km/h";
                var satellite="Satellite: "+ arrTrackFull[i][5];
                var charge= "Charge v: "+arrTrackFull[i][6]+"";
                //alert(lat+"  "+lng);
	
	
                //ico_track(arrTrackFull[i][4]);
                //var 
                var ico = icon_speed[ico_track(arrTrackFull[i][4])];
	
                marker_tr[i]= new L.Marker([lat, lng], {icon: ico}).bindPopup(uzer[nomerUzera][1]+"<br>"+date+"<br>"+speed+"<br>"+satellite+ "<br>"+charge);
                marker_tr[i].addTo(map);
                marker_tr_array_position[i]	= new L.LatLng(lat, lng);
		
                if (i==arrTrack.length-2){
                    map.panTo(L.latLng(lat, lng))
                }
            }
            polyline = L.polyline(marker_tr_array_position, {color: '#0024ff', weight: '2', opacity: "0.9"}).addTo(map);
            markerPatterns = L.polylineDecorator(polyline, {
                patterns: [
                    { offset: '5%', repeat: '100px', symbol: new L.Symbol.ArrowHead({pixelSize: 10,  polygon: false, pathOptions: {stroke: true, weight: 2, color: '#0024ff', opacity: "0.9"}})}
                ]
            }).addTo(map);
	 
			
            latlng2distance(arrTrackFull); // //запускаем функцию расчета дистанции
			
			
        }


    </script>

    <script>//нажатие на кнопку вектор. отображение следа за устройством(ми)

        var indexVector=0;
        document.getElementById("vector").onclick=vector;
        function vector(){
            if(indexVector==0){
                indexVector=1;
                polyLineInit();
                v[i]=0; 
                document.getElementById("vector").style.color="#fff"; 
                document.getElementById("vector").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
		
            }else{
                indexVector=0;
                document.getElementById("vector").style.color="#000"; 
                document.getElementById("vector").style.textShadow="none";
		
                for (var i=0; i<countUzers; i++){
			
                    try{
                        map.removeLayer(markerPatternsMPoly[i]);
                    } catch(err){};
                    try{
                        map.removeLayer(mPoly[i]);
                    } catch(err){};
			
			
			
			
                    v[i]=0; 
                }
            }

        }



        var v=[];
        for(var i=0; i<countUzers; i++){
            v[i]=0;
        }

        var mPoly=[];
        var mPolylineCoords=[];



        polyLineInit();

        function polyLineInit(){

            for(var i=0; i<countUzers; i++){
                mPolylineCoords[i]=[];
            }
            for(var i=0; i<countUzers; i++){
                mPolylineCoords[i][0]=last_marker_array_position[i]; //массив координат каждого юзера mPolylineCoords[i] массив юзера i
                //alert(last_marker_array_position[i]);
            }
        }
        //var mpolycoord;
        var markerPatternsMPoly=[];
        function polylineDraw(i){

            var ii=i;
            //alert(i, mPolylineCoords[ii]);
            try{ 
                map.removeLayer(mPoly[ii]);
                map.removeLayer(markerPatternsMPoly[ii]);
		
            } catch(err){};
            mPoly[ii]= new L.polyline(mPolylineCoords[ii], {color: '#ff0078', weight: '2', opacity: "1"}).addTo(map);
	
            try{ 
                //markerPatternsMPoly=[];
                markerPatternsMPoly[ii] = new L.polylineDecorator(mPoly[ii], {
                    patterns: [
                        { offset: '0%', repeat: '100px', symbol: new L.Symbol.ArrowHead({pixelSize: 10,  polygon: false, pathOptions: {stroke: true, weight: 2, color: '#ff0078', opacity: "0.9"}})}
                    ]
                }).addTo(map);
            }catch(err){};



	
        }




    </script>
    
    <script>// вычисление расстояний 
        var lat1;
        var long1;
        var lat2;
        var long2;

        var dist_sum =0;



        function latlng2distance(arrTrackFull) {
   

            var R = 6372795;  //радиус Земли
	
            for (var i=0; i<(arrTrackFull.length-1); i++){


                lat1 = arrTrackFull[i][1] ; long1= arrTrackFull[i][2];
                lat2 = arrTrackFull[i+1][1]; long2= arrTrackFull[i+1][2];

		
		 
                //перевод коордитат в радианы
                lat1 *= Math.PI / 180;
                lat2 *= Math.PI / 180;
                long1 *= Math.PI / 180;
                long2 *= Math.PI / 180;
			
                //вычисление косинусов и синусов широт и разницы долгот
                var cl1 = Math.cos(lat1);
                var cl2 = Math.cos(lat2);
                var sl1 = Math.sin(lat1);
                var sl2 = Math.sin(lat2);
                var delta = long2 - long1;
                var cdelta = Math.cos(delta);
                var sdelta = Math.sin(delta);
	   
                //вычисления длины большого круга
                var y = Math.sqrt(Math.pow(cl2 * sdelta, 2) + Math.pow(cl1 * sl2 - sl1 * cl2 * cdelta, 2));
                var x = sl1 * sl2 + cl1 * cl2 * cdelta;
                var ad = Math.atan2(y, x);
                var dist = ad * R; //расстояние между двумя координатами в метрах
                dist_sum=dist_sum+dist;
            }
            dist_sum=dist_sum/1000;
            dist_sum=parseFloat(dist_sum.toFixed(2));
	
            document.getElementById('dist_t').innerHTML = " "+dist_sum; //вставляем на страницу
	     
	 
	 
        }
    </script>
    
    <script>//выпадающее меню Target
        document.getElementById("target").onclick=target;
        function target(){
            if(document.getElementById("div_avto").style.visibility=="visible"){
                document.getElementById("target").style.color="#000";
                document.getElementById("target").style.textShadow="none";
                document.getElementById("div_avto").style.visibility="hidden";
            }else{
                document.getElementById("div_avto").style.visibility="visible";
                document.getElementById("target").style.color="#fff";
                document.getElementById("target").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
            }
        }


    </script>


    <script>//выпадающее меню Report
        document.getElementById("k_report").onclick=report;
        document.getElementById("cancel_report").onclick=report;
        function report(){
            if(document.getElementById("div_report").style.visibility=="visible"){
                document.getElementById("k_report").style.color="#000";
                document.getElementById("k_report").style.textShadow="none";
                document.getElementById("div_report").style.visibility="hidden";
            }else{
                document.getElementById("div_report").style.visibility="visible";
                document.getElementById("k_report").style.color="#fff";
                document.getElementById("k_report").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
            }
        }
    </script>



    <script>//кнопка скрыть
        document.getElementById("skryt").onclick=skryt;
        function skryt(){
            if(0<arrTrack.length){

                for(var i=0; i<arrTrack.length-1; i++){
                    map.removeLayer(marker_tr[i]);
                }
                map.removeLayer(polyline);
                map.removeLayer(markerPatterns);
                //polyline ////////////////////////////////////
            }
        }

    </script>


    <script> //подсветка кнопки следить
        document.getElementById("sledit").onclick=sledit;
        function sledit(){
            if (uzerClick==(-1)){
                alert("Устройство не выбрано");
            }
            else{
                if(indexSledt==0){
                    indexSledt=1;
                    document.getElementById("sledit").style.color="#fff";  //если устройство выбрано - светим 
                    document.getElementById("sledit").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
		
		
                }
                else{
                    indexSledt=0;
                    document.getElementById("sledit").style.color="#000";
                    document.getElementById("sledit").style.textShadow="none";
                }
            }

        }
    </script>


    <!-- СОБЫТИЯ! -->


    <script>//////////////////////////////////////////////////////////////////////////////////////// СОБЫТИЯ!
        var event=<?php echo  $event; ?>; //подписка на события
        var event_change=<?php echo  $event_change; ?>;//возможность добавлять события
        var event_confirm=<?php echo  $event_confirm; ?>;// возможность редактировать - добавлять удалять подтверждать

        if (event_confirm==0){
            document.getElementById("confirm_event").style.display="none";
            document.getElementById("send_email").style.display="none";
        }

        if (event_change==0){
            document.getElementById("action_event").style.display="none";
        }


        document.getElementById("information").onclick=information;

        function information(){
            if(document.getElementById("div_information").style.visibility=="visible"){
                document.getElementById("div_information").style.visibility="hidden";
                document.getElementById("information").style.color="#000";
                document.getElementById("information").style.textShadow="none";
	
            }else{
                document.getElementById("div_information").style.visibility="visible";
                document.getElementById("information").style.color="#fff";
                document.getElementById("information").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
            }

        }


    </script>

    <script>
        var dtpIcon; //иконка ДТП
        dtpIcon = L.icon({ 
            iconUrl: 'images/mrk_dtp.png',
            iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [20, 20],
            iconAnchor: [10, 10]
				
        });
	
        var malIcon; //иконка ДТП
        malIcon = L.icon({ 
            iconUrl: 'images/mrk_malfunction.png',
            iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [20, 20],
            iconAnchor: [10, 10]
				
        });

        var dlit=5000;  //каждые 5 секунд
        var intervalID;
        //z = setTimeout(zaprosDtp, 1000); // через секунду посылаем запрос

        var activdtp="0";

        function zaprosDtp(){
            try{
                dtp = $.ajax({  
					
                    type:'POST',
                    url:'dtp.php',
                    data: 'login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, 
                    async: false,
                    success: function (data){ 
                        //alert(data); 
                        //proverka_popoln();
					
                    }

                }).responseText;
            }catch(err){}
	
            try{
                proverkaDtp(dtp); //получаем посылку и запускаем проверку есть ли новая посылка
            }catch(err){}
            z = setTimeout(zaprosDtp, dlit);
        }	

        var markerD=[];
        var dtpParam=[];
        
        function proverkaDtp(dtp){
	
            if (activdtp == dtp){
                //alert ("ничего нового"); //ничего не делаем
            }else{
                removeOllDtp();
                var fulllarrdtp=[];
                activdtp=dtp;
                var arrStrokaDtp=dtp.split("&#33");
                var a="";

                for(var i=0; i<arrStrokaDtp.length; i++){
                    fulllarrdtp[i]=arrStrokaDtp[i].split("&#32");
                }
                dtpParam=fulllarrdtp; //полный массив текущих дтп
                addnewDtp(fulllarrdtp);   //добавляем дтп на карту
            }
        }
        var countDtp=0;
        var idDisplay=[];
        var color_event=[]; //цвет покарски текста в текстовом окне
        function addnewDtp(f){
            countDtp=0;
            idDisplay=[];
            var infoText="";
            for(var i=0; i<f.length-1; i++){
                var lat = f[i][1];
                var lng = f[i][2];
                //var date = unparseTime(f[i][3]);
				
				var date=calcTime.unparse(f[i][3]);
                var typeEvent=f[i][4];
                if(typeEvent=="accident"){
                    typeEvent="ДТП";
                }else{
                    typeEvent="Поломка"
                }
		
		
		
                if (f[i][7]==0){
                    color_event[i]="gray";
                }
                if(f[i][7]==1){
                    color_event[i]="blue";
                }
		
                infoText=infoText+'<p id='+"d"+f[i][0]+' '+'onclick="start(this)"'+'style="color:'+color_event[i]+'">' +f[i][0]+". "+f[i][8]+" "+typeEvent+"<br>"+date+"<br>" +f[i][5]+"</p>"; // f[i][3] -время
                if (f[i][4]=="accident"){
                    var ico=dtpIcon;
                }else{
                    var ico=malIcon;
                }
		
                markerD[i]=L.marker([lat, lng], {icon: ico}).bindPopup(f[i][0]+". "+date+"<br>" +f[i][5]);
                markerD[i].addTo(map);
		
                idDisplay[i]= "d"+f[i][0]; // актуальные id
                countDtp++;   //уеличиваем счетчик текущих дтп 
            }

            addInfoText(infoText);

        }
        
        function addInfoText(t){
            document.getElementById("infoText").innerHTML = t;
        }

        function removeOllDtp(){
            for(var i=0; i<countDtp; i++){
                //alert[f[i][0]];
                map.removeLayer(markerD[i]); 
            }
        }
        
        var selectIdDtp;
        function start(obj)	{ // по клику на дтп 
            var id=obj.id; // id дтп равно
            var n;
            var countId= id.replace( 'd', '' );
            document.getElementById("selectRemove").innerHTML = " "+countId; //в ремове пишем номер дтп
            document.getElementById("span_event").innerHTML = " "+countId;
            selectIdDtp=countId;

            var text=document.getElementById(id).innerHTML;
            //alert (text);

            for(var i=0; i<countDtp; i++){
	
                document.getElementById(idDisplay[i]).style.color=color_event[i]; //всем  назначаем тот цвет, который был в посылке серый цвет
                if(dtpParam[i][0]==countId){
                    n=i; // n номер в массиве этого дтп
                }
            }
            document.getElementById(id).style.color="red";  //теперь только активному
            map.panTo(L.latLng(dtpParam[n][1], dtpParam[n][2])); //центрируем на выбранном дтп
            document.getElementById("commentTextEmail").value="";
            var arr_text=text.split("<br>");
            text=arr_text[2];
            //text=text.replace("<br>", "\r\n ");
            document.getElementById("commentTextEmail").value = text;

        }
        document.getElementById("removeDtp").onclick=removeDtp; 
 
        var indexRemoveDtp=0;
        function removeDtp(){
            if(indexRemoveDtp==1){
                document.getElementById("removeDtp").style.color="#000";
                document.getElementById("removeDtp").style.textShadow="none";
                indexRemoveDtp=0;
                //removeMark();
              //  document.getElementById("div_confirm_cancel_dtp").style.visibility="hidden";
            }else{
	
                document.getElementById("removeDtp").style.color="#fff";
                document.getElementById("removeDtp").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
                indexRemoveDtp=1;
              //  document.getElementById("div_confirm_cancel_dtp").style.visibility="visible";
            }
        }

        document.getElementById("cancel_remove").onclick=removeDtp;
        function confirm_event_to_db(){

            conf_event=$.ajax({  
					
                type:'POST',
                url:'confirm_event.php',
                data: 'login='+login+'&id='+selectIdDtp, //логин и id дтп 
                async: false,
                success: function (data){ 
                    //alert(data); 
                    //proverka_popoln();
					
                },
            }).responseText;
        }

      //  document.getElementById("confirm_event").onclick=confirm_event_to_db;
      //  document.getElementById("confirm_remove").onclick=RemDtpDb; //запуск исменений в БД

        function RemDtpDb(){
            removeDtp();

	
	
            Rem = $.ajax({  
					
                type:'POST',
                url:'remDtp.php',
                data: 'login='+login+'&id='+selectIdDtp+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, //логин и id дтп 
                async: false,
                success: function (data){ 
                    //alert(data); 
                    //proverka_popoln();
					
                }

            }).responseText;
        }

        var indexMarkMap=0;

      //  document.getElementById("cancel_dtp").onclick=markMap;
        function markMap(){  // изменение подсветки
            if(indexMarkMap==1){
                document.getElementById("markMap").style.color="#000";
                document.getElementById("markMap").style.textShadow="none";

                document.getElementById("div_confirm_dtp").style.visibility="hidden";
	
	
	
	
	
                try{
                    map.removeLayer(tempMarker); 
                } catch(err){}
                indexMarkMap=0;
            }else{
	
                document.getElementById("markMap").style.color="#fff";
                document.getElementById("markMap").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
                indexMarkMap=1;
                clickTempMark=0;
              //  document.getElementById("div_confirm_dtp").style.visibility="visible";
            }
        }

        map.on('click', onMapClick); // следит за кликом на карте
        var clickTempMark=0;
        var setDtpLatLng;
        function onMapClick(e){
	
            if (indexMarkMap==1 && clickTempMark==0){  //если нажата кнопочка адд маркер, выполняем  //////////////////////////////////////////////////////////////////////////////////////////////////////
	
                if (type=="accident"){
                    var ico=dtpIcon;
                }else{
                    var ico=malIcon;
                }
	
                tempMarker=L.marker(e.latlng, {icon: ico}).addTo(map); //ставим временный маркер
                clickTempMark=1;
                setDtpLatLng=e.latlng;
            }
        }

     //   document.getElementById("confirm").onclick=checkCon;  // при подтверждении запускаем проверку сделанных действий
        function checkCon(){
            //alert ("проверяем");
            if(clickTempMark==1){
                //alert("стартуем запись");
                clickTempMark=0;
                startIntoBD();
            }

        }

        var type="accident"; // тип события по умолчанию
        function startIntoBD(){ //

            var temp=setDtpLatLng.toString();

            temp=temp.replace( 'LatLng(', '' );
            temp=temp.replace(')','');
            var tempArr=[];
            tempArr=temp.split(',');
            var lat=tempArr[0];
            var lng=tempArr[1];
          //  var datatime=time();
			var datatime=calcTime.present_time();
			
            var comment=getText();


            markMap();
            recordDtp = $.ajax({  
						
                type:'POST',
                url:'recordDtp.php',
                data: 'lat='+lat+'&lng=' +lng+ '&datatime='+datatime+'&type='+type+'&comment='+comment+'&login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, //посылаем маркер в дб
                async: false,
                success: function (data){ 
						
                },
            }).responseText;
        }


        function getText(){
            var text="";
            text=document.getElementById("commentText").value; //берем текст
            document.getElementById("commentText").value=""; // и очищаем
            return text;
        }

        function clickType(obj){
            type=obj.id;
            //alert(type+"Text");

            document.getElementById("accidentText").style.color="#000";
            document.getElementById("accidentText").style.textShadow="none";
            document.getElementById("accident").style.background ="none";
            document.getElementById("malfunctionText").style.color="#000";
            document.getElementById("malfunctionText").style.textShadow="none";
            document.getElementById("malfunction").style.background ="none";

            document.getElementById(type+"Text").style.color="#fff";
            document.getElementById(type+"Text").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
            document.getElementById(type).style.background ="#6fd5ff";


        }

        document.getElementById("resetParam").onclick=resetParam;
        function resetParam(){

            document.getElementById("accidentText").style.color="#000";
            document.getElementById("accidentText").style.textShadow="none";
            document.getElementById("accident").style.background ="none";
            document.getElementById("malfunctionText").style.color="#000";
            document.getElementById("malfunctionText").style.textShadow="none";
            document.getElementById("malfunction").style.background ="none";
            type="accident";

            for(var i=0; i<countDtp; i++){
	
                document.getElementById(idDisplay[i]).style.color=color_event[i]; //всем  назначаем тот цвет, который был в посылке серый цвет
		
            }

        }		
    </script>

 
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 


    <script>
        var geocoder;
        var count_geo=0;
        geocoder = new google.maps.Geocoder();

        $(document).ready(function() { 
         
            //initialize();
				  
            $(function() {
                $("#address").autocomplete({
                    //Определяем значение для адреса при геокодировании
                    source: function(request, response) {
                        geocoder.geocode( {'address': request.term}, function(results, status) {
                            response($.map(results, function(item) {
		  
                                return {
                                    label:  item.formatted_address,
                                    value: item.formatted_address,
                                    latitude: item.geometry.location.lat(),
                                    longitude: item.geometry.location.lng()
                                }
                            }));
                        })
                    },
                    //Выполняется при выборе конкретного адреса
                    select: function(event, ui) {
                        $("#latitude").val(ui.item.latitude);
                        $("#longitude").val(ui.item.longitude);
                        //alert(ui.item.latitude);
                        map.panTo(L.latLng(ui.item.latitude, ui.item.longitude));
                        map.setZoom(17);
                        count_geo++;
                        geo_marker(ui.item.latitude,ui.item.longitude, count_geo);
                        
                        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
		
                        // marker.setPosition(location);
                        // map.setCenter(location);
                    }
                });
            });
	
            //Добавляем слушателя события обратного геокодирования для маркера при его перемещении  
            google.maps.event.addListener(marker, 'drag', function() {
                geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            $('#address').val(results[0].formatted_address);
                            $('#latitude').val(marker.getPosition().lat());
                            $('#longitude').val(marker.getPosition().lng());
                        }
                    }
                });
            });
  
        });

        document.getElementById("geosearch_v").onclick=geosearch;

        function geosearch(){
            if(document.getElementById("div_geosearch").style.visibility=="visible"){
                document.getElementById("div_geosearch").style.visibility="hidden";
	
            }else{
                document.getElementById("div_geosearch").style.visibility="visible";
	
            }
        }
    </script>

    <script>
        //нажатие на области
        document.getElementById("oblasti").onclick=oblasti;

        function oblasti(){
            vhide(this);
            if(document.getElementById("div_oblasti").style.visibility=="visible"){
                document.getElementById("div_oblasti").style.visibility="hidden";
            }else{
                document.getElementById("div_oblasti").style.visibility="visible";
                _oblasti();
            }

        }

        function _oblasti(){
            document.getElementById("div_oblasti").style.visibility="visible";
            var text_oblasti = $.ajax({  
						
                type:'POST',
                url:'oblasti.php',
                data: 'login='+login, //
                async: false,
                success: function (data){ 
						
                },

            }).responseText;
            //alert(text_oblasti);
            document.getElementById("div_oblasti").innerHTML = text_oblasti;
        }
    </script>

</html>
